<template>
  <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px">
    <el-row>
      <el-col :span="12">
        <el-form-item :label="`${formData.tenantTypeName} logo`" prop="logo">
          <UploadImg v-model="formData.logo" :limit="1" :is-show-tip="false" />
          <div style="font-size: 10px" class="pl-10px">推荐 180x180 图片分辨率</div>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item :label="`${formData.tenantTypeName}简称`" prop="shortName">
          <el-input v-model="formData.shortName" :placeholder="`${formData.tenantTypeName}简称`" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item :label="`${formData.tenantTypeName}面积`" prop="acreage">
          <el-input v-model="formData.acreage" :placeholder="`${formData.tenantTypeName}面积`" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item :label="`${formData.tenantTypeName}简介`" prop="introduction">
          <el-input
            v-model="formData.introduction"
            :rows="3"
            type="textarea"
            :placeholder="`${formData.tenantTypeName}简介`"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item :label="`${formData.tenantTypeName}所在地区`" prop="areaId">
          <el-cascader
            v-model="formData.areaId"
            :options="areaList"
            :props="defaultProps"
            class="!w-100%"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item :label="`${formData.tenantTypeName}详细地址`" prop="detailAddress">
          <el-input
            v-model="formData.detailAddress"
            :placeholder="`${formData.tenantTypeName}详细地址`"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="营业开始时间" prop="openingTime">
          <el-time-select
            v-model="formData.openingTime"
            :max-time="formData.closingTime"
            placeholder="开始时间"
            start="08:30"
            step="00:15"
            end="23:30"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="营业结束时间" prop="closingTime">
          <el-time-select
            v-model="formData.closingTime"
            :min-time="formData.openingTime"
            placeholder="结束时间"
            start="08:30"
            step="00:15"
            end="23:30"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="预约开始时间" prop="maketOpeningTime">
          <el-time-select
            v-model="formData.makeOpeningTime"
            :max-time="formData.makeClosingTime"
            placeholder="开始时间"
            start="00:00"
            step="00:15"
            end="24:00"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="预约结束时间" prop="makeClosingTime">
          <el-time-select
            v-model="formData.makeOpeningTime"
            :min-time="formData.makeClosingTime"
            placeholder="结束时间"
            start="00:00"
            step="00:15"
            end="24:00"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="经度" prop="longitude">
          <el-input v-model="formData.longitude" placeholder="请输入门店经度" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="纬度" prop="latitude">
          <el-input v-model="formData.latitude" placeholder="请输入门店纬度" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="获取经纬度">
      <el-button type="primary" @click="mapDialogVisible = true">获取</el-button>
    </el-form-item>
    <el-row>
      <el-col :span="12">
        <el-form-item label="法人身份证" prop="logo">
          <div>
            <UploadImg v-model="formData.logo" :limit="1" :is-show-tip="false" :width="'300px'" />
            <div style="font-size: 10px" class="pl-10px text-center">法人身份证正面照</div>
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="法人身份证" prop="logo">
          <div>
            <UploadImg v-model="formData.logo" :limit="1" :is-show-tip="false" :width="'300px'" />
            <div style="font-size: 10px" class="pl-10px text-center">法人身份证反面照</div>
          </div>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="姓名" prop="logo">
          <el-input v-model="formData.longitude" placeholder="姓名" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="身份证号" prop="logo">
          <el-input v-model="formData.longitude" placeholder="身份证号" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="营业执照" prop="businessLicense">
          <UploadImg v-model="formData.businessLicense" :limit="1" :is-show-tip="false" />
          <!-- <div style="font-size: 10px" class="pl-10px">营业执照</div> -->
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="证照信息" prop="phone">
          <el-input v-model="formData.phone" placeholder="证照信息" />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>

  <el-dialog v-model="mapDialogVisible" title="获取经纬度" append-to-body>
      <IFrame class="h-609px" :src="tencentLbsUrl" />
    </el-dialog>

</template>
<script setup lang="ts">
import { propTypes } from '@/utils/propTypes'
import type { TenantVO } from '@/api/system/tenant'
import { defaultProps } from '@/utils/tree'
import { getAreaTree } from '@/api/system/area'
import { copyValueToTarget } from '@/utils'
import * as ConfigApi from '@/api/mall/trade/config'

defineOptions({ name: 'SystemStoreForm' })

const props = defineProps({
  propFormData: {
    type: Object as PropType<TenantVO>,
    default: () => {}
  },
  activeName: propTypes.string.def('tenant')
})

const message = useMessage() // 消息弹窗

const mapDialogVisible = ref(false) // 地图弹窗的是否展示

const formData = reactive<TenantVO>({
  logo: '',
  businessLicense: '',
  shortName: '',
  acreage: '',
  detailAddress: '',
  introduction: '',
  areaId: 0,
  openingTime: undefined,
  closingTime: undefined,
  makeOpeningTime: undefined,
  makeClosingTime: undefined,
  latitude: undefined,
  longitude: undefined,
  tenantTypeName: '租户'
})
const formRules = reactive({
  // logo: [{ required: true, message: 'logo 不能为空', trigger: 'blur' }],
  // areaId: [{ required: true, message: '所在区域不能为空', trigger: 'blur' }],
  // detailAddress: [{ required: true, message: '详细地址不能为空', trigger: 'blur' }],
  // openingTime: [{ required: true, message: '营业开始时间不能为空', trigger: 'blur' }],
  // closingTime: [{ required: true, message: '营业结束时间不能为空', trigger: 'blur' }],
  // latitude: [{ required: true, message: '纬度不能为空', trigger: 'blur' }],
  // longitude: [{ required: true, message: '经度不能为空', trigger: 'blur' }],
})
const formRef = ref() // 表单 Ref
const areaList = ref() // 区域树
const tencentLbsUrl = ref('') // 腾讯位置服务 url

/** 表单校验 */
const emit = defineEmits(['update:activeName'])
const validate = async () => {
  if (!formRef) return
  try {
    await unref(formRef)?.validate()
    // 校验通过更新数据
    Object.assign(props.propFormData, formData)
  } catch (e) {
    message.error('【扩展信息】不完善，请填写相关信息')
    emit('update:activeName', 'operation')
    throw e // 目的截断之后的校验
  }
}
defineExpose({ validate })

/** 将传进来的值赋值给 formData */
watch(
  () => props.propFormData,
  (data) => {
    if (!data) {
      return
    }
    copyValueToTarget(formData, data)
  },
  {
    deep: true,
    immediate: true
  }
)

/** 选择经纬度 */
const selectAddress = function (loc: any): void {
  if (loc.latlng && loc.latlng.lat) {
    formData.latitude = loc.latlng.lat
  }
  if (loc.latlng && loc.latlng.lng) {
    formData.longitude = loc.latlng.lng
  }
  mapDialogVisible.value = false
}

/** 初始化腾讯地图 */
const initTencentLbsMap = async () => {
  window.selectAddress = selectAddress
  window.addEventListener(
    'message',
    function (event) {
      // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
      let loc = event.data
      if (loc && loc.module === 'locationPicker') {
        // 防止其他应用也会向该页面 post 信息，需判断 module 是否为 'locationPicker'
        window.parent.selectAddress(loc)
      }
    },
    false
  )
  const data = await ConfigApi.getTradeConfig()
  const key = data.tencentLbsKey
  tencentLbsUrl.value = `https://apis.map.qq.com/tools/locpicker?type=1&key=${key}&referer=myapp`
}

/** 初始化 **/
onMounted(async () => {
  areaList.value = await getAreaTree()
  // 加载地图
  // await initTencentLbsMap()
})
</script>
<style lang="scss">
.mapBox .el-dialog__body {
  height: 640px !important;
}
</style>
